<template>
  <div>
    <a-button @click="openModal">{{ t["通用素材"] }}</a-button>
    <a-modal v-model:visible="visible" :title="t['通用素材']" :footer="false">
      <a-alert :type="'error'" class="mb-4">
        {{ t["当商品无法匹配对应的商品素材时，则自动显示通用素材"] }}
      </a-alert>
      <a-form @submit="submit" :model="form">
        <a-form-item :label="t['图片']" name="image">
          <div class="upload" @click="open('image')" v-if="!form.imageUrl">
            <icon-plus class="text-8 text-gray-600" />
          </div>

          <div v-else class="relative">
            <div class="close">
              <a-button status="danger" @click="form.imageUrl = ''" shape="circle">
                <icon-close />
              </a-button>
            </div>
            <Resource :file="{ uri: form.imageUrl, type: '0' }" />
          </div>
        </a-form-item>
        <a-form-item :label="t['视频']" name="video">
          <div class="upload" @click="open('video')" v-if="!form.videoUrl">
            <icon-plus class="text-8 text-gray-600" />
          </div>
          <div v-else class="relative w-full">
            <div class="close">
              <a-button status="danger" @click="form.videoUrl = ''" shape="circle">
                <icon-close />
              </a-button>
            </div>
            <Resource class="w-fit" :file="{ uri: form.videoUrl, type: '1' }" />
          </div>
        </a-form-item>
        <a-form-item>
          <div class="flex gap-4">
            <a-button @click="visible = false">{{ t["取消"] }}</a-button>
            <a-button html-type="submit" type="primary">{{ t["保存"] }}</a-button>
          </div>
        </a-form-item>
      </a-form>
      <FileSelector :type="fileType" @change="setResource" v-model:visible="fileVisible" />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { Library } from "@/api/service/library/types";
import { storeResource } from "@/api/service/store/store";
import FileSelector from "@/views/admin/components/file-selector/FileSelector.vue";
import { getStoreConfig, storeConfig } from "@/views/admin/system/system";

const t = translate("公共模块");
const visible = ref(false);

const fileVisible = ref(false);

type SelectedType = "video" | "image";
const mode = ref<SelectedType | null>();
const openModal = async () => {
  await getStoreConfig();
  visible.value = true;
  const { imageUrl, videoUrl } = storeConfig.value;
  console.log(imageUrl);

  form.value.imageUrl = imageUrl ?? "";
  form.value.videoUrl = videoUrl ?? "";
};
const open = (type: SelectedType) => {
  mode.value = type;
  fileVisible.value = true;
};
const form = ref({
  videoUrl: "",
  imageUrl: ""
});
const fileType = computed(() => (mode.value === "video" ? "1" : "0"));
const setResource = (data: Library[]) => {
  if (mode.value === "image") {
    form.value.imageUrl = data[0].uri;
  } else if (mode.value === "video") {
    form.value.videoUrl = data[0].uri;
  }
};

const submit = async () => {
  await storeResource({
    ...form.value
  });
  visible.value = false;
  form.value = {
    videoUrl: "",
    imageUrl: ""
  };
};
</script>

<style lang="scss" scoped>
.upload {
  @apply w-[200px] h-[120px] center cursor-pointer relative;
  border: 1px dashed #a5a5a5;
}
.close {
  @apply absolute top-0 right-0 z-10;
}
</style>
